<!DOCTYPE html>
<html ng-app="jcs-demo">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Auto Validate Test Page</title>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
    <div class="row" ng-controller="demoCtrl">
        <div class="col-sm-8 col-sm-offset-1">
            <p>
                <button type="button" class="btn btn-primary" ng-click="toggleBS3Icons();">Toggle Validation State Icons</button>
            </p>
            <form role="form" name="testFrm" novalidate="novalidate"
                  ng-submit="submit(testFrm);"
                  validate-non-visible-controls="false"
                  validate-on-form-submit="true"
                  disable-dynamic-validatio_n>
                <button type="button" class="btn btn-primary" ng-click="setExternalError(testFrm);">Set External Error On Firstname</button>
                <div class="form-group">
                    <label class="control-label">Name</label>
                    <input type="text" name="firstname" style="display: block;" class="form-control" placeholder="Enter Your Name"
                           ng-model="user.name" required="required" ng-required-err-type="nameRequired"/>
                </div>

                <div class="form-group">
                    <label class="control-label">Name</label>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="glyphicon glyphicon-envelope"></i>
                        </span>
                        <input type="email" name="email" class="form-control"
                               ng-model="user.email"
                               placeholder="Enter email address"
                               ng-required="true"/>

                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label">Email address - <small>Element with a custom element modifier (see source code)</small></label>
                    <input type="email" class="form-control" placeholder="Enter email" ng-model="user.email" required="required" element-modifier="myCustomModifierKey"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Password - <small>Element with validation happening on blur rather than change</small></label>
                    <input type="password" class="form-control" ng-model="user.password" placeholder="Password" required="required" ng-minlength="6" ng-model-options="{updateOn: 'blur'}"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Robot Test: Please spell Angular. - <small>Custom validation</small></label>
                    <input type="text" class="form-control" placeholder="Enter The Word Angular" ng-model="user.iq" mustcontainword="angular"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Regex Pattern Only Letters</label>
                    <input type="text" class="form-control" placeholder="Enter Only Letters..." ng-model="user.letters" ng-pattern="/[a-zA-Z]/"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Is User Active?
                        <input type="checkbox" class="form-control"  ng-model="user.isActive" /></label>
                </div>
                <div class="form-group">
                    <label class="control-label">Input with no validation</label>
                    <input type="text" class="form-control" placeholder="Enter The Word Angular" ng-model="user.noValidation" />
                </div>

                <div class="form-group">
                    <label class="control-label">Valid Styling disabled</label>
                    <input type="text" class="form-control" required ng-model="user.someProperty" disable-invalid-styling="true" />
                </div>

                <ng-form name="childForm">
                    <div class="form-group">
                        <label class="control-label">Nickname</label>
                        <input type="text" class="form-control" name="Nickname" placeholder="Enter Nickname" ng-model="user.Nickname" required="required" ng-minlength="4">
                    </div>
                </ng-form>

                <button type="submit" class="btn btn-default">Submit</button>
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="button" class="btn btn-default" ng-click="resetFormViaEvent()">Reset Via Event</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <h1>Not Required</h1>
                <form name="signupFrm" novalidate="novalidate" class="form-horizontal" ng-submit="signin()">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">Username:</label>
                        <div class="col-sm-10">
                            <input id="inputName" class="form-control" name="username"
                                   ng-model="model.username"
                                   ng-model-options="{updateOn: 'blur'}"
                                   ng-minlength="3"
                                   ng-maxlength="10"
                                    />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Password:</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="password"
                                   type="password"
                                   ng-model="model.password"
                                   ng-model-options="{updateOn: 'blur'}"
                                   ng-minlength="3"
                                   ng-maxlength="10"
                                   required/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-9">
                            <p class="input-group">
                                <input type="text" class="form-control" ng-model="startTime" required ng-minlength="2" disable-valid-styling="true"/>

                                <!--<ul style="display: none;">-->
                                    <!--<li></li>-->
                                <!--</ul>-->

                                <span class="input-group-btn">
                                    <button class="btn btn-default"><i class="glyphicon glyphicon-facetime-video"></i></button>
                                </span>
                            </p>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                    </div>
                </form>

                <span>Result :</span>{{result}}

        </div>
    </div>

    <script type="text/javascript" src="../bower_components/angular/angular.js"></script>

    <!--<script type="text/javascript" src="../dist/jcs-auto-validate.min.js"></script>-->

    <script type="text/javascript" src="../src/jcs-auto-validate.js"></script>
    <script type="text/javascript" src="../src/providers/validator.js"></script>
    <script type="text/javascript" src="../src/services/bootstrap3ElementModifier.js"></script>
    <script type="text/javascript" src="../src/services/debounce.js"></script>
    <script type="text/javascript" src="../src/services/defaultErrorMessageResolver.js"></script>
    <script type="text/javascript" src="../src/services/foundation5ElementModifier.js"></script>
    <script type="text/javascript" src="../src/services/foundation6ElementModifier.js"></script>
    <script type="text/javascript" src="../src/services/validationManager.js"></script>
    <script type="text/javascript" src="../src/config/ngSubmitDecorator.js"></script>
    <script type="text/javascript" src="../src/config/ngModelDecorator.js"></script>
    <script type="text/javascript" src="../src/directives/formReset.js"></script>
    <script type="text/javascript" src="../src/directives/autoValidateFormOptions.js"></script>
    <script type="text/javascript" src="../src/directives/registerCustomFormControl.js"></script>
    <script type="text/javascript" src="../src/jcs-auto-validate-run.js"></script>

    <script type="text/javascript">
    (function (angular) {
        var app = angular.module('jcs-demo', ['jcs-autoValidate']);

        app.controller('demoCtrl', [
            '$http',
            '$scope',
            'bootstrap3ElementModifier',
            function ($http, $scope, bootstrap3ElementModifier) {
                $scope.user = {};
                $scope.bs3Icons = false;

                $scope.toggleBS3Icons = function () {
                    $scope.bs3Icons = !$scope.bs3Icons;
                    bootstrap3ElementModifier.enableValidationStateIcons($scope.bs3Icons);
                };

                $scope.resetFormViaEvent = function() {
                    $scope.$broadcast('form:testFrm:reset');
                };

                $scope.submit = function (frmCtrl) {
                    //frmCtrl.autoValidateFormOptions.resetForm();

                    alert('submitted');
                    $http.post('https://api.app.com/users', $scope.user).then(function (response) {
                        if (response.data.validationErrors) {
                            angular.forEach(response.data.validationErrors, function (error) {
                                frmCtrl.setExternalValidation(error.key, error.messageKey, error.message);
                            })
                        }
                    });
                };

                $scope.setExternalError = function (frm) {
                    frm.setExternalValidation('firstname', "customError", 'hello joe', true);
                };

                $scope.toggleBS3Icons();
            }
        ]);

        app.directive('mustcontainword', [
            function() {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function(scope, elm, attrs, ctrl) {
                        var validateFn = function (viewValue) {
                            if (ctrl.$isEmpty(viewValue) || viewValue.toLowerCase().indexOf(attrs.mustcontainword.toLowerCase()) === -1) {
                                ctrl.$setValidity('mustcontainword', false);
                                return undefined;
                            } else {
                                ctrl.$setValidity('mustcontainword', true);
                                return viewValue;
                            }
                        };

                        ctrl.$parsers.push(validateFn);
                        ctrl.$formatters.push(validateFn);
                    }
                }
            }]);

        app.directive('uniqueIdChecker', [
            '$http',
            function($http) {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function(scope, elm, attrs, ctrl) {
                        var validateFn = function (viewValue) {
                            $http.get('https://myapp.com/validator-checks/unique-id/' + viewValue).then(function () {
                                ctrl.$setValidity('nonUniqueId', true);
                            }, function () {
                                ctrl.$setValidity('nonUniqueId', false);
                            });

                            return viewValue;
                        };

                        ctrl.$parsers.push(validateFn);
                        ctrl.$formatters.push(validateFn);
                    }
                }
            }]);

        app.run([
            'defaultErrorMessageResolver',
            function (defaultErrorMessageResolver) {
                defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
                    errorMessages['nonUniqueId'] = 'This id is already taken plus choose another';
                });
            }
        ]);

        app.factory('myCustomElementModifier', [
            function () {
                var /**
                         * @ngdoc function
                         * @name myCustomElementModifier#makeValid
                         * @methodOf myCustomElementModifier
                         *
                         * @description
                         * Makes an element appear valid by apply custom styles and child elements.
                         *
                         * @param {Element} el - The input control element that is the target of the validation.
                         */
                        makeValid = function (el) {
                            el.removeClass('bg-red');
                            el.addClass('bg-green');
                        },

                        /**
                         * @ngdoc function
                         * @name myCustomElementModifier#makeInvalid
                         * @methodOf myCustomElementModifier
                         *
                         * @description
                         * Makes an element appear invalid by apply custom styles and child elements.
                         *
                         * @param {Element} el - The input control element that is the target of the validation.
                         * @param {String} errorMsg - The validation error message to display to the user.
                         */
                        makeInvalid = function (el, errorMsg) {
                            el.removeClass('bg-green');
                            el.addClass('bg-red');
                        };

                return {
                    makeValid: makeValid,
                    makeInvalid: makeInvalid,
                    key: 'myCustomModifierKey'
                };
            }
        ]);

        // now register the custom element modifier with the auto-validate module and set it as the default one for all elements
        app.run([
            'validator',
            'myCustomElementModifier',
            'defaultErrorMessageResolver',
            function (validator, myCustomElementModifier, defaultErrorMessageResolver) {
                validator.registerDomModifier(myCustomElementModifier.key, myCustomElementModifier);
                defaultErrorMessageResolver.setI18nFileRootPath('../src/lang/');
                defaultErrorMessageResolver.setCulture('en-gb');

                defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
                    errorMessages['pattern'] = 'Custom Error Message {0}';
                    errorMessages['mustcontainword'] = 'Please enter the word "{0}"';
                    errorMessages['nameRequired'] = 'Please enter your name';
                });
            }
        ]);
    }(angular));
    </script>
</body>
</html>
